<template>
  <div ref="chart" class="chart"></div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts';

const chart = ref<HTMLDivElement | null>(null);
let myChart: echarts.ECharts | null = null;

onMounted(() => {
  if (chart.value) {
    myChart = echarts.init(chart.value);
    myChart.setOption({
      // 配置你的图表选项
      series: [
        {
          type: 'pie',
          data: [
            { value: 1048, name: '吃饭' },
            { value: 735, name: '购物' },
            { value: 580, name: '娱乐' },
            { value: 484, name: '交通' },
            { value: 300, name: '其他' }
          ]
        }
      ]
    });
  }
});

onBeforeUnmount(() => {
  if (myChart) {
    myChart.dispose();
  }
});
</script>

<style scoped>
.chart {
  width: 100%;
  height: 400px;
}
</style> 